import React, { Component } from 'react'
import { Button, Toast } from 'antd-mobile'
import MynavBar from '../../components/MyNavBar/index'
import styles from './index.module.scss'
import { userLogin } from '../../api/index'
import { setToken } from '../../utils/auth'
// 导入formid 处理表单的库
import { withFormik,Form, Field, ErrorMessage } from 'formik'
// 导入 yup 用于校验表单的库
import * as yup from 'yup'

/* 
  进入到登录页的两种情况：
    1. 直接点击登录按钮，跳转到登录页
      - 登录成功后返回上一页
    2. 用户访问需要登录后才能打开的页面，被鉴权路由重定向到了登录页
      - 登录成功后，返回重定向前的页面
*/

// 校验规则
const REG_UNAME =  /^[0-9a-zA-Z_]{5,8}$/
const REG_PWD =  /^[0-9a-zA-Z_]{5,12}$/
export default withFormik({
    // 使用 yup 添加表单校验规则
    validationSchema:yup.object().shape({
      username: yup.string().required('账号为必填项').matches(REG_UNAME, '用户名长度为5到8位，只能出现数字、字母、下划线'),
      password: yup.string().required('密码为必填项').matches(REG_PWD, '密码长度为5到12位，只能出现数字、字母、下划线'),
    }),
  // 提供表单项的值
  mapPropsToValues:() => ({username:'',password:''}),
    // 提供表单提交事件
    handleSubmit: async (values,{props}) => {
      console.log(values);
      const res = await userLogin(values)
      const { body,description,status } = res.data
      if (status === 200) {
        // 1.把token保存到本地存储
        const token = body.token
        // localStorage.setItem('HKZF_TOKEN',token)
        setToken(token)
        // 2.返回上一页
        console.log(props);
        if(!props.location.state){
          // 如果没有state值，返回上一页
          props.history.goBack()
        } else {
          props.history.replace(props.location.state.from.pathname)
        }
        
      } else {
        Toast.info(description,1.5)
      }
    }
})(
  class Login extends Component {
    state = {}
    componentDidMount(){}
      render() {
        return (
          <div className={styles.login}>
           <div style={{height:'45px'}} > <MynavBar>账号登录</MynavBar></div>
            <Form className={styles.form}>
              <Field name="username" type="text" className={styles.form_input} placeholder='请输入账号' />
              {/* {this.props.errors.username && <div>{this.props.errors.username}</div>} */}
              <ErrorMessage name="username" component="div" className={styles.error}/>
              <Field name="password" type="password" className={styles.form_input} placeholder='请输入密码' />
              <ErrorMessage name="username" component="div" className={styles.error}/>
              {/* <Button type="primary">登录</Button> */}
              <button className={styles.form_button} type="submit">
                登录
              </button>
            </Form>
          </div>
        )
      }
    }
    
) 